<template>
  <div class="warp">
    <div class="header continer">
      <i class="iconfont icon-zuojiantou" @click="Back"></i>
      <h4>管理收货地址</h4>
      <span @click="Add">新建</span>
    </div>
    <div class="main continer">
      <h5 class="title">我的收货地址</h5>
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <p>
            <span class="username">{{ item.username }}</span>
            <span class="phone">{{ item.phone }}</span>
          </p>
          <p class="address">
            {{ item.city }} {{ item.area }} {{ item.house }}
          </p>
        </div>
        <div class="right">
          <i
            v-if="!isEdit"
            class="iconfont icon-youjiantou"
            @click="SelectAddress(item.id)"
          ></i>
          <i
            v-if="isEdit"
            class="iconfont icon-youjianbianji"
            @click="Edit(item.id)"
          ></i>
           <i
            v-if="isEdit"
            class="iconfont icon-shanchu"
            @click="Delte(item.id)"
          ></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.list = this.$store.state.address.AddressList;
    this.from = this.$route.query.from;
    this.orderId= this.$route.query.orderId;
    
     let isEdit = this.$route.query.isEdit;
    if (isEdit > 0) this.isEdit = true;
  },
  data() {
    return {
        //从哪个页面过来的
        from:'',
      isEdit: false,
      list: [],
      orderId:0,
    };
  },
  methods: {
    Back() {
      this.$router.go(-1);
    },
    SelectAddress(id) {
      //this.$router.push({ path: `/${id}` });
     let path='/';
    let query={ addressId:id};
     if(this.from=='order'){
       path='/OrderSumbit',
       query={addressId:id,orderId:this.orderId};
     }
     this.$router.push({
        path:path,
        query:query
      })
    },
    Add() {
      let id = 0;
       this.$router.push(
          { path: "/AddressEdit",query:{
              from:this.from,
              id:id,
          } }
          
          );
      //this.$router.push({ path: `/AddressEdit/${id}` });
    },
    Edit(id) {
       this.$router.push(
          { path: "/AddressEdit",query:{
              from:this.from,
              id:id,
          } }
          
          );
      //this.$router.push({ path: `/AddressEdit/${id}` });
    },
    Delte(id){
        this.$store.commit("address/DelteAddressInfo", {
        id:id
      });
    }
  },
};
</script>
<style lang="scss" scoped>

.continer {
  padding: 0 18px;
}
.warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: white;
    height: 44px;
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    h4 {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      text-align: right;
    }
  }
  .main {
    .title {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      padding-top: 16px;
    }
    .item {
      margin-top: 16px;
      display: flex;
      padding: 16px;

      background-color: white;

      .left {
        flex: 1;
        p {
          .username {
            margin-right: 66px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #999999;
          }
          .phone {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #999999;
          }
          margin-top: 8px;
          line-height: 20px;
        }
        .address {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
        }
      }
      .right {
          i:first-child{
         margin-right: 10px;
          }
         
        display: flex;
        margin-left: 20px;
       // flex-direction: column;
        align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
        justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
      }
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>